import 'package:flutter/material.dart';

class SizeBoxView extends StatefulWidget {
  const SizeBoxView({super.key});

  @override
  State<SizeBoxView> createState() => _SizeBoxViewState();
}

class _SizeBoxViewState extends State<SizeBoxView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            noSetWidthHeight(),
            setWidthHeight(),
            formSize(),
            shrink(),
            square(),
            SizedBox(width: 300,height: 200,child: expand(),)
          ],
        ),
      ),
    );
  }

  Widget getTips(String title) {
    return Center(child: Text(title, style: TextStyle(color: Colors.white)));
  }

  Widget expand() {
    return SizedBox.expand(
      child: Container(width: 200, height: 200, color: Colors.teal,child: getTips("expand 无限宽高 为了展示外面套了一个宽高固定的SizeBox")),
    );
  }

  Widget noSetWidthHeight() {
    return SizedBox(
      child: Container(
        width: 200,
        height: 200,
        color: Colors.teal,
        child: getTips("noSetWidthHeight"),
      ),
    );
  }

  Widget setWidthHeight() {
    return SizedBox(
      width: 100,
      height: 100,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.teal,
        child: getTips("setWidthHeight"),
      ),
    );
  }

  Widget formSize() {
    return SizedBox.fromSize(
      size: Size(100, 100),
      child: Container(
        color: Colors.amber,
        width: 50,
        height: 50,
        child: getTips("formSize"),
      ),
    );
  }

  Widget shrink() {
    return SizedBox.shrink(
      child: Container(
        color: Colors.blue,
        width: 45,
        height: 45,
        child: getTips("shrink"),
      ),
    );
  }

  Widget square() {
    return SizedBox.square(
      dimension: 56,
      child: Container(color: Colors.blue, width: 45, height: 45,child: getTips("square"),),
    );
  }

  Widget getChild1() {
    return Column(
      children: [
        //与 Container 不同，SizedBox 是一个透明的盒子，不能为其设置样式(例如，背景颜色、边距、填充等)。
        // 如果为 SizedBox 指定特定大小，则该大小也将应用于其子小部件。否则，如果未指定 SizedBox 的宽度或为 null，
        // 则其子小部件的宽度将通过其自己的设置或等于 0(如果未设置)。随着高度也有类似的行为。
        // 创建 SizedBox 所涉及的所有参数，例如宽度、高度、大小和子项都是可选的。
        SizedBox(
          width: 40,
          height: 40,
          child: Container(width: 30, height: 30, color: Colors.redAccent),
        ),
        //SizedBox.expand 构造函数用于创建一个宽度和高度为 double.infinity 的 SizedBox。这意味着在父小部件的许可下，SizedBox 的大小将尽可能大。
        // SizedBox.expand(
        //   child: Container(width: 20, height: 20, color: Colors.teal),
        // ),
        //SizedBox.fromSize：用于通过可选参数 size 创建具有指定大小的 SizedBox
        SizedBox.fromSize(
          size: Size(10, 30),
          child: Container(color: Colors.amber, width: 50, height: 50),
        ),

        //SizedBox.shrink:构造函数用于创建一个尺寸最小的 SizedBox，如其父小部件建议的那样。
        SizedBox.shrink(
          child: Container(color: Colors.blue, width: 45, height: 45),
        ),

        SizedBox.square(
          dimension: 56,
          child: Container(color: Colors.blue, width: 45, height: 45),
        ),
      ],
    );
  }
}
